<template>
    <div class="deviceLeft-chart">
        <div id="deviceLeft-chart" style="width: 100%; height: 300px"></div>
        <div class="deviceLeft-chart-title">
            {{ currentNodeName }} 2025年{{ curMonth }}月 用{{ getTitle() }}量
            <div class="rightTitle">
                <!-- <img src="@/assets/images/controlCenter/refresh.png" class="refresh" /> -->
                <!-- <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label> -->
            </div>
        </div>
    </div>
</template>

<script>
import {Utility} from '@/libs/utility.js'
import * as echarts from 'echarts'
export default {
    props: ['name', 'currentNodeId', 'currentNodeName', 'dir'],
    mounted() {
        this.initChart()
    },
    computed: {
        cDir() {
            return this.dir
        }
    },
    watch: {
        cDir(newVal) {
            console.log(newVal)
            this.myChart.resize()
        }
    },
    data() {
        return {
            curMonth: null,
            myChart: null,
            dayCount: Utility.getCurrentMonthDay()
        }
    },
    methods: {
        getTitle() {
            var title = ''
            if (this.name == 1) {
                title = '电'
            }
            if (this.name == 2) {
                title = '水'
            }
            if (this.name == 3) {
                title = '气'
            }
            if (this.name == 4) {
                title = '热'
            }
            return title
        },
        getUnit() {
            return this.name == 1 ? 'kWh' : 'm³'
        },
        initChart() {
            let dayList = []
            let oneList = []
            let twoList = []
            let threeList = []
            const unitName = this.getUnit()
            const title = this.getTitle()
            const curDay = new Date().getDate()
            this.curMonth = new Date().getMonth() + 1
            for (let index = 1; index <= Utility.getCurrentMonthDay(); index++) {
                if (index < 10) {
                    dayList.push('0' + index)
                } else {
                    dayList.push(index.toString())
                }
                if (index <= curDay) {
                    oneList.push(parseInt(Math.random() * 1000))
                } else {
                    oneList.push(0)
                }
                twoList.push(parseInt(Math.random() * 1000))
                threeList.push(parseInt(Math.random() * 1000))
            }
            const chartDom = document.getElementById('deviceLeft-chart')
            const myChart = echarts.init(chartDom)
            myChart.clear()
            const option = {
                title: {
                    text: '单位：' + unitName,
                    left: '20',
                    top: '20',
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                grid: {
                    right: '2%',
                    left: '6%'
                },
                // subtitle: {
                //     text: "综合能耗趋势分析",
                //     left: "left"
                // },
                toolbox: {
                    feature: {
                        print: {},
                        export: {}
                    },
                    right: 10
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    itemWidth: 24,
                    itemHeight: 18,
                    textStyle: {
                        color: '#666'
                    },
                    itemGap: 30
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: dayList,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: `当月用${title}`,
                        type: 'bar',
                        data: oneList
                    },
                    {
                        name: `上月用${title}`,
                        type: 'line',
                        data: twoList,
                        lineStyle: {
                            color: 'green'
                        }
                    },
                    {
                        name: `预测用${title}`,
                        type: 'line',
                        data: threeList,
                        lineStyle: {
                            color: 'orange'
                        }
                    }
                ]
            }
            myChart.setOption(option)
            this.myChart = myChart
        }
    }
}
</script>

<style scoped lang="scss">
.deviceLeft-chart {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    // div:first-child {
    //     background-color: red;
    //     div:first-child {
    //         background-color: blue;
    //     }
    // }
    .deviceLeft-chart-title {
        position: absolute;
        top: 10px;
        text-align: center;
        right: 0;
        left: 0;
        .rightTitle {
            text-align: right;
            width: 180px;
            float: right;
            margin-right: 20px;
            span {
                text-align: center;
                font-weight: bold;
                font-size: 18px;
            }
            label {
                text-align: right;
                float: right;
                color: #3b8cfc;
                margin-right: 15px;
                cursor: pointer;
                font-size: 16px;
            }
            .refresh {
                float: right;
                cursor: pointer;
                width: 16px;
                margin-top: 4px;
            }
            .printer {
                color: #3b8cfc;
            }
            .download {
                color: #3b8cfc;
            }
        }
    }
}
</style>
